/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="task_list_table">
        <div class="task__name">
            <lang>任务名称：</lang>
            <span class="font-important">{{ name }}</span>
        </div>
        <div class="table-data">
            <sf-grid>
                <sf-table 
                    ref="registryTable" 
                    :options="options_fix"
                    @pagechange="_onPageChange"
                    @sizechange="_onSizeChange">
                    <sf-table-column :default-width="30"
                                     type="index">
                        <lang>序号</lang>
                    </sf-table-column>
                    <sf-table-column data-index="name"
                                     :default-width="60">
                        <lang>子任务名称</lang>
                    </sf-table-column>
                    <sf-table-column data-index="status"
                                     :default-width="60">
                        <lang>状态</lang>
                    </sf-table-column>
                    <sf-table-column data-index="opr"
                                     :default-width="60">
                        <lang>操作</lang>
                    </sf-table-column>
                    <template slot="status"
                              slot-scope="{record}">
                        <div class="task-flex"
                             :class="repositoryStatusClass(record.status)">
                            <span class="status-img task-common"></span>
                            <span class="status-text">{{ repositoryStatusText(record.status) }}</span>
                        </div>
                    </template>
                    <template slot="opr"
                              slot-scope="{record}">
                        <div class="opr">
                            <a 
                                class="link-btn"
                                @click="_deleteTask(record)">
                                <lang>删除</lang>
                            </a>
                        </div>
                    </template>
                </sf-table>
            </sf-grid>
        </div>
    </div>
</template>
<script>


import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
const TRAINING_URL = {
    get:trainingUrlAdapter('task/job'),
    delete:trainingUrlAdapter('task/job/run')
};


/*训练状态*/
const REPOSITORY_STATUS_TEXT = {
    Succeeded:_('任务完成'),
    Running:_('任务中'),
    Failed:_('任务失败')
};
const REPOSITORY_STATUS_CLASS = {
    Succeeded:'task-success',
    Running:'task-run',
    Failed:'task-fail'
};

const PAGE_COUNT = 10;


export default {
    name: 'TaskListTable',
    data () {
        return {
            searchParams: {
                keyword: '',
                pageSize: PAGE_COUNT,
                pageNum: 0
            },
            options_fix: {
                bufferView: false,

                // 配置这个后才可以实现保持勾选状态
                idProperty: 'id',
                selectionHide: true
            },
            jobId:'',
            name:''
        };
    },
    computed: {
        projectId () {
            return this.$route.query.projectId || '';
        }
    },
    watch: {
        jobId () {
            this.refreshGrid();
        }
    },
    methods: {

        // 刷新grid
        async refreshGrid () {
            this.searchParams.projectId = this.projectId;
            this.searchParams.jobId = this.jobId;
            let jsonData = await this.$ajax.get(`${TRAINING_URL.get}/${this.jobId}/run`, this.searchParams);
            let table = this.$refs.registryTable;
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                table.loadData([]);
                return;
            }
            if (!table) {
                return;
            }

            //只有任务完成才能注册模型，被选中
            data.list.forEach(item => {
                item.selectAble = !!item.s3Address;
            });

            // selectAble
            table.loadData(data.list || []);
        },
        repositoryStatusClass (status) {
            return REPOSITORY_STATUS_CLASS[status];
        },
        repositoryStatusText (status) {
            return REPOSITORY_STATUS_TEXT[status];
        },
        getJsonValue () {
            return this.$refs.registryTable.getSelections();
        },
        async ajaxDeleteTask (record) {
            const DELETE_URL = `${TRAINING_URL.delete}/${record.id}`;
            this.$mask();
            let jsonData = await this.$ajax.delete(DELETE_URL, record);
            this.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.$ok(_('删除子任务成功'));
            this.refreshGrid();
        },

        //删除任务
        _deleteTask (record) {
            this.$confirm({
                title: _('提示'),
                subTitle: _('确定要删除{0}任务吗？', record.name),
                msg: _('删除后，操作无法撤回，请谨慎操作'),
                icon: 'warning',
                autoClose: true,
                callback: actionName => {
                    if (actionName === 'submit') {
                        this.ajaxDeleteTask(record);
                    }
                }
            });
        },
        _onPageChange (pageNum) {
            Object.assign(this.searchParams, {
                pageNum: pageNum - 1
            });
            this.refreshGrid();
        },
        _onSizeChange (nowPageIndex, nowPageSize) {
            Object.assign(this.searchParams, {
                pageNum: nowPageIndex - 1,
                pageSize: nowPageSize
            });
            this.refreshGrid();
        }
    }
  
};
</script>
<style lang="less">
    .task_list_table{
        width: 640px;
        height: 500px;
        padding: 10px;
        overflow: auto;
        .task__name{
            margin-bottom: 15px;
        }
        .table-data {
            .sfv-grid {
                /* border: none; */
                height: 100%;
                display: flex;
                flex-direction: column;

                .sfv-table {
                    flex: 1;
                }
            }
    
            .task-flex{
                display: flex;
                align-items: center;
            }
        }
    }
</style>
  